<template>
  <div class="footer">
    <div class="main">
      <div class="item item1">
        <input type="text" v-model="content" @keyup.enter="send">
      </div>
      <div class="item">
        <i class="iconfont icon-jia_icon"></i>
        <!-- @click="iconShow=!iconShow" -->
        <!-- <img src="http://yx-web.nos.netease.com/webdoc/h5/im/chat-editor-1.png" alt> -->
      </div>
      <div class="item">
        <div class="btn" @click="send">发送</div>
      </div>
    </div>
    <div class="iconBox" v-if="iconShow">
      <router-link tag="div" :to="{ path: '/redEdit?target='+target}" class="icon">
        <img src="../img/redicon.png" alt>
        <div class="txt">红包</div>
      </router-link>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import { send, getIMData } from "../../../im";
import { getImMsg } from "../../../im";
export default {
  data() {
    return {
      content: "",
      friends: null,
      iconShow: false,
      target: "",
      account: JSON.parse(this.$route.query.item).account
    };
  },
  mounted() {},

  methods: {
    ...mapActions(["addcozeItem"]),

    send() {
      if (!this.content) return;
      console.log("send_account-----------------", this.account);
      send(this.account, this.content, "text", (error, msg) => {
        let item = {
          type: "out",
          content: msg.text,
          icon: require("../../../assets/img/003.png")
        };
        this.addcozeItem(item);
        this.content = "";
        //保存发送记录
        let strMsg = JSON.stringify(msg);
        this.localMsg(strMsg);
        //保存最后一条消息
        this.savaLastMsg(strMsg);
      });
    },
    localMsg(strMsg) {
      let count =
        parseInt(
          localStorage.getItem(
            localStorage.zyUserId +
              "_" +
              "from_" +
              this.account +
              "_send_msg_count"
          )
        ) || 0;
      count += 1;
      localStorage.setItem(
        localStorage.zyUserId +
          "_" +
          "from_" +
          this.account +
          "_send_msg_count",
        count + ""
      );
      localStorage.setItem(
        localStorage.zyUserId +
          "_" +
          "from_msg_send_" +
          this.account +
          "_" +
          count +
          "_",
        strMsg
      );
    },
    savaLastMsg(strMsg) {
      let session = localStorage.getItem(
        localStorage.zyUserId + "_" + "session"
      );
      if (session) {
        session = JSON.parse(session);
      } else {
        session = {};
      }
      session[this.account] = strMsg;
      localStorage.setItem(
        localStorage.zyUserId + "_" + "session",
        JSON.stringify(session)
      );
    }
  }
};
</script>
<style lang="stylus" scoped>
.footer {
  width: 100%;
  // height: 1.53rem;
  background: rgba(235, 235, 235, 1);
  border: 1px solid rgba(230, 230, 231, 1);
  position: fixed;
  bottom: 0;
  left: 0;

  .main {
    display: flex;
    margin-bottom: 10px;

    .item {
      flex: 1;
      height: 0.65rem;
      line-height: 0.65rem;
      margin-top: 10px;
      text-align: center;

      img {
        width: 30px;
      }

      .btn {
        width: 1rem;
        height: 0.65rem;
        background: #0091e4;
        border-radius: 5px;
        color: #FFF;
      }

      i {
        font-size: 30px;
        position: relative;
        top: 5px;
        left: -5px;
        color: #999;
      }
    }

    .item1 {
      width: 5.1rem;
      flex: 0 1 5.1rem;

      input {
        width: 90%;
        height: 0.65rem;
        border-radius: 5px;
        margin: 0 5px;
        padding-left: 5px;
      }
    }
  }

  .iconBox {
    padding: 0.2rem;
    padding-top: 0;
    width: 100%;
    height: 1.6rem;

    .icon {
      width: 1.09rem;
      height: 1.09rem;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgba(222, 222, 223, 1);
      position: relative;

      img {
        width: 0.44rem;
        height: 0.53rem;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .txt {
        text-align: center;
        width: 1.09rem;
        font-size: 12px;
        position: absolute;
        left: 50%;
        bottom: -25px;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
